<template>
  <div class="app-container">
    <el-form label-width="100px" class="el_form">
      <el-form-item label="角色名称">
        <el-input :disabled="true" v-model="form.name" placeholder="角色名称"/>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input :autosize="{ minRows: 6 }" v-model="form.description" maxlength="100" show-word-limit type="textarea" placeholder="角色描述" />
      </el-form-item>
      <el-form-item label="开通权限">
        <el-tree
          ref="tree"
          :data="data"
          :props="defaultProps"
          show-checkbox
          node-key="label" />
      </el-form-item>
      <el-form-item label="接收微信通知">
        <el-switch
          v-model="form.enableNotify"
          :active-value="0"
          :inactive-value="1"
        />
      </el-form-item>
      <el-form-item label="">
        <el-button class="form_button" type="primary" @click="handleSave">保 存</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-form label-width="0px" class="el_form2 hidden-sm-and-up">
      <el-form-item label="">
        <el-input :disabled="true" v-model="form.name" placeholder="角色名称"/>
      </el-form-item>
      <el-form-item label="">
        <el-input :autosize="{ minRows: 4 }" v-model="form.description" maxlength="100" show-word-limit type="textarea" placeholder="角色描述"/>
      </el-form-item>
      <el-form-item label="">
        <el-tree
          ref="tree"
          :data="data"
          :props="defaultProps"
          show-checkbox
          node-key="label" />
      </el-form-item>
      <el-form-item label="" class="form_button">
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </el-form-item>
    </el-form> -->
  </div>
</template>

<script>
import { getShopId } from '@/utils/auth'
import { update, findById } from '@/api/role'
import { MessageBox } from 'element-ui'
const tree = ['客户查询', '备注查询', '到访记录查询', '登记次数查询', '到访次数查询', '客户登记分析', '到访记录分析', '角色管理', '账号管理']
export default {
  name: 'NewRole',
  components: {},
  data() {
    return {
      form: {
        shopId: getShopId()
      },
      data: [
        {
          id: 1,
          label: '客户登记查询',
          children: [
            {
              id: 2,
              label: '客户查询'
            },
            {
              id: 3,
              label: '备注查询'
            }
          ]
        },
        {
          id: 4,
          label: '客户到访查询',
          children: [
            {
              id: 5,
              label: '到访记录查询'
            },
            {
              id: 6,
              label: '登记次数查询'
            },
            {
              id: 13,
              label: '到访次数查询'
            }
          ]
        },
        {
          id: 7,
          label: '统计分析',
          children: [
            {
              id: 8,
              label: '客户登记分析'
            },
            {
              id: 9,
              label: '到访记录分析'
            }
          ]
        },
        {
          id: 10,
          label: '系统管理',
          children: [
            {
              id: 11,
              label: '角色管理'
            },
            {
              id: 12,
              label: '账号管理'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    findById(this.$route.query.id).then(resp => {
      this.form = resp.data.data
      var checked = JSON.parse(resp.data.data.permissions)
      for (var i = 0; i < checked.length; i++) {
        if (checked[i] === '*') {
          this.$refs.tree.setCheckedKeys(tree)
          return
        }
      }
      this.$refs.tree.setCheckedKeys(checked)
    })
  },
  methods: {
    handleSave() {
      this.form.permissions = JSON.stringify(this.$refs.tree.getCheckedKeys(true))
      update(this.form).then(resp => {
        if (resp.data.code === '100') {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.$router.push({ path: '/system/role' })
        } else {
          MessageBox.alert(resp.data.message, '错误', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  .el_form{
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }
  .form_button{
    float: right;
  }
  .el_form2{
    width: 100%;
  }
}
</style>

